<template>
  <view class="page-prev-p1">
    <view class="tit-box">
      <view class="row-1">
        <image class="img" :src="staticImgs.baseTip" mode="widthFix"></image>
      </view>
      <view class="row-2">
        <image class="img" :src="staticImgs.qstTip" mode="widthFix"></image>
      </view>
    </view>
    <view class="opts-wrapper">      
      <view class="opt-box" v-for="(opt,index) in optArr" :key="index" @click="actChange(index)">
        <view class="img-box" :key="index">
          <image class="img" :src="opt.img" mode="widthFix"></image>
        </view>
        <view class="opt-txt"
          :style="{'background-image':(index === actIndex || opt.val == rAct) ? 'url('+staticImgs.actBoxBg+')' : 'linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0))'}"
        >{{opt.txt}}</view>
      </view>
    </view>
    <view class="btn-pos">
      <image @click="prevHandle" class="img" :src="staticImgs.prevBtn" mode="widthFix"></image>
      <image @click="nextHandle" class="img" :src="staticImgs.doneBtn" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
  
  
  export default{
    props:{
      act:null,
      opts:null
    },
    data(){
      return{
        staticImgs:{
          baseTip:this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/base-tip.png",
          qstTip:this.imgBaseURL + "/scl/checkup-sexuality/prev-p5/qst-tip.png",
          bg:this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/bg.jpg",
          nextBnt:this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/next-qst.png",
          doneBtn:this.imgBaseURL + "/scl/checkup-sexuality/prev-p5/done.png",
          prevBtn:this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/prev-qst.png",
          actBoxBg:this.imgBaseURL + "/scl/checkup-sexuality/prev-p1/act-box-bg.png",
        },

        optArr:[
          {
            img:this.imgBaseURL + "/scl/checkup-sexuality/prev-p5/danshen.png",
            txt:'单身主义',
          },
          {
            img:this.imgBaseURL + "/scl/checkup-sexuality/prev-p5/qidai.png",
            txt:'期待爱情',
          },
          {
            img:this.imgBaseURL + "/scl/checkup-sexuality/prev-p5/yiyou.png",
            txt:'已有家属',
          }
        ],
        actIndex:null,
        rAct:null,
      }
    },
    watch:{
      act:{
        handler(val,oldVal){
          console.log(val,'====val')
          if(val){
            this.rAct = val
          }
        },
        immediate:true
      },
      opts:{
        handler(val,oldVal){
          if(val && val.length>0){
            this.optArr = val.map(item=>{
              return {
                img:item.imageURL,
                txt:item.text,
                val:item.key,
              }
            })
          }
          console.log(val,'==opts====val')
        },
        immediate:true
      }
    },
    methods:{
      actChange(index){
        this.rAct = null
        this.actIndex = index
      },
      prevHandle(){
        this.$emit('prev')
      },
      nextHandle(){
        if(this.actIndex === null){
          if(this.rAct){
            this.actIndex = this.optArr.findIndex(item=>item.val === (this.rAct + ''))
          }else{
            return this.$showToast('请选择你的婚姻态度')
          }
        }
        this.$emit('done',this.actIndex)
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .page-prev-p1{
    position: relative;
    height: 100vh;
    width: 100vw;
      box-sizing: border-box;
      padding-top: 140rpx;
    
    >.tit-box{
      display: flex;
      flex-direction: column;
      align-items: center;
      
      // margin-top: 140rpx;
      .row-1{
        width: 352rpx;
        height: 100rpx;
        .img{
          width: 100%;
          height: 100%;
        }
      }
      .row-2{
        margin-top: 20rpx;
        width: 548rpx;
        height: 60rpx;
        .img{
          width: 100%;
          height: 100%;
        }
      }
    }
  
    >.opts-wrapper{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 120rpx 40rpx;
      margin-top: 56rpx;
      
      .opt-box{
        position: relative;
        >.img-box{
          width: 300rpx;
          height: 300rpx;
          
          .img{
            width: 100%;
            height: 100%;
          }
        }
        >.opt-txt{
          position: absolute;
          bottom: -100rpx;
          left:50%;
          transform: translateX(-50%);
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 36rpx;
          color: #FFFFFF;
          line-height: 100rpx;
          text-align: center;
          font-style: normal;
          
          width: 240rpx;
          height: 100rpx;
          margin: auto;
          margin-top: -20rpx;
          
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }
      
    }
    
    >.btn-pos{
      
      position: fixed;
      bottom: 6vh;
      left: 0;
      right: 0;
      z-index: 2;
      
      display: flex;
      justify-content: center;
      column-gap: 50rpx;
      margin-top: 24rpx;
      
      .img{
        width: 280rpx;
        height: 100rpx;
      }
    }
    
  }
</style>